<template>
  <div class="user-order">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" fixed placeholder />
    <van-tabs class="tabs" v-model="selected" sticky offset-top="46">
      <van-tab name="0" title="全部订单">
        <order-list ref="orderList0" :status="null" />
      </van-tab>
      <van-tab name="1" title="即将到账"></van-tab>
      <van-tab name="2" title="已到账"></van-tab>
      <van-tab name="3" title="无效订单">
        <order-list ref="orderList3" status="EXPIRED" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderList from "@/views/user/components/OrderList.vue";
import { NavBar, Tab, Tabs } from "vant";

export default {
  name: "UserOrder",
  components: {
    OrderList,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      selected: "0"
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      let selected;
      if (!to.params.selected) {
        selected = "0";
        vm.selected = "0";
        return;
      } else {
        selected = to.params.selected;
      }
      vm.selected = selected;
      vm.$refs["orderList" + selected].onRefresh();
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.user-order {
  background-color: #eee;
  height: 100%;
}

.tabs {
  background-color: #eee;
}
</style>
